<template>
  <div class="home">
    <van-nav-bar
    title="学生系统"
    left-text="添加"
    right-text="筛选"
    
    @click-left="$router.push('/about')"
    @click-right="onClickRight"
    />
    <!-- 列表 -->
    <list v-for="(item,index) in gradesList" :key="index" :item="item" @click="$router.push(`/about?index=${index}`)"></list>
    <!-- 弹出层 -->
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
        <div class="pop-con">
            <p @click="search(1)" :class="{active:keyWords.includes(1)}">优秀</p>
            <p @click="search(2)" :class="{active:keyWords.includes(2)}">良好</p>
            <p @click="search(3)" :class="{active:keyWords.includes(3)}">末班</p>
        </div>
    </van-popup>


  </div>
</template>

<script>
// @ is an alias to /src
import list from '@/components/list.vue'
import {ref,reactive,toRefs,computed} from 'vue'
import {useStore} from 'vuex'
export default {
//   name: 'HomeView',
  components: {
    list
  },
  setup(){
    const {state,commit} = useStore()
    const data = reactive({
        show:false,
        keyWords:[],//保存点击的状态，
        gradesList:[]
    })
    data.gradesList = computed(()=>{
        if(data.keyWords.length==0){
            // 渲染所有的
            return state.gradesList
        }
        return state.gradesList.filter(item=>data.keyWords.includes(item.status))
    })
    const onClickRight = ()=>{
        data.show = true

    }
    const search=(status)=>{
        let index = data.keyWords.findIndex(item=>item==status)
        if(index !=-1){
            // 找到了   把找到的删除
            data.keyWords.splice(index,1)

        }else{
            // 没找到   把当前传过来的参数添加到keyWords里面
            data.keyWords.push(status)

        }

    }
    return {onClickRight,...toRefs(data),search}
  }
}
</script>
<style lang="scss" scoped>
.pop-con{
    display:flex;
    
    p{
        width:80px;
        height:30px;
        line-height:30px;
        text-align:center;
        border:1px solid #ddd;
        margin:20px 10px;
    }
    .active{
        border:1px solid blue;
    }
}
</style>

